<template>
  <!--  -->
  <div class="box1">
    <div class="left">
      <img src="../mine/img/ic_menu.png" alt="" />
    </div>
    <div class="right">
      <img src="../mine/img/设置.jpeg" alt="" />
    </div>
  </div>
  <!--  -->
  <div class="box2">
    <div class="footer">
      <div class="footer1">
        <img src="../mine/img/宠派66.png" alt="" />
      </div>
      <div class="footer2">
        <img src="../mine/img/石头雕.jpeg" alt="" />
      </div>
      <div class="footer3">
        <img src="../mine/img/宠派59.png" alt="" />
      </div>
    </div>
    <div class="nav">
      <h3>王嘉尔</h3>
      <span>我是一个健身教练</span>
    </div>
    <div class="below">
      <div class="below1">
        <h4>2451</h4>
        <h4>发布</h4>
      </div>
      <div class="below2">
        <h4>1200万</h4>
        <h4>粉丝</h4>
      </div>
      <div class="below3">
        <h4>253</h4>
        <h4>关注</h4>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="box3">
    <h4>宠物列表</h4>
    <div class="copy">
      <div class="copy1">
        <img src="../mine/img/dog5.webp" alt="" />
        <p class="october">十月</p>
      </div>
      <div class="copy2">
        <img src="../mine/img/dog4.webp" alt="" />
        <p class="sixteen">十六</p>
      </div>
      <div class="copy3">
        <router-link to="/moon">
        <img src="../mine/img/宠派38.png" alt="" />
        <p class="tree">添加宠物</p>
      </router-link>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="box4">
    <div class="icon1">
      <img src="../mine/img/宠派100.png" alt="">
    </div>
    <div class="icon2">
      <img src="../mine/img/宠派94.png" alt="">
    </div>
    <div class="icon3">
      <img src="../mine/img/宠派93.png" alt="">
    </div>
    <div class="icon4">
      <img src="../mine/img/宠派91.png" alt="">
    </div>
  </div>
  <!--  -->
  <div class="box5">
    <div class="ipe1">
      <img src="../mine/img/石头雕.jpeg" alt="">
    </div>
    <div class="ipe2">
      <p>王嘉尔</p>
      <p>四川</p>
    </div>
    <div class="ipe3">
      <img src="../mine/img/宠派106.png" alt="">
    </div>
  </div>
  <div class="dog">
    <img src="../mine/img/WechatIMG62935.jpeg" alt="">
  
  </div>
</template>

<script>
export default {
  name: "mine",
};
</script>

<style land="less"  scoped>
.box5 {
  height: 61px;
  width: 100%;
  top: 0px;
  position: relative;
  border-bottom: 0.5px solid rgb(232, 225, 225);
}
.box5 .ipe1{
  width: 117px;
  left: 10px;
  position: absolute;
}
.ipe1 img {
  height: 56px;
  border-radius: 50%;
}
.ipe2{
  position: absolute;
  left: 75px;
  top: 7px;
}
.ipe2 p{
  text-align: center;
  font-weight: 300;
}
.ipe3{
  position: absolute;
  left: 326px;
  top: 17px;
}
.ipe3 img{
  height: 6px;
  text-align: center;
}
.dog{
  width: 100%;
  height: 200px;
  position: relative;
  top: -1px;
}
.dog img{
  width: 100%;
  height: 200px;
}
/*  */
.box1 {
  height: 55px;
  width: 100%;
  position: relative;
}
.left {
  height: 100%;
  width: 20%;
  position: absolute;
}
.left img {
  height: 22px;
  margin-left: 18px;
  margin-top: 10px;
}
.right {
  height: 100%;
  width: 20%;
  position: absolute;
  left: 300px;
}
.right img {
  height: 41px;
  margin-left: 21px;
  margin-top: 5px;
}
.box2 {
  height: 284px;
  width: 100%;
  position: relative;
  top: -20px;
  border-bottom: 0.5px solid rgb(232, 225, 225);
}
.footer {
  width: 100%;
  height: 170px;
  position: absolute;
}
.footer1 {
  height: 50px;
  width: 16%;
  position: absolute;
  left: 41px;
  top: 54px;
}
.footer1 img {
  height: 63px;
}
.footer2 {
  position: absolute;
  left: 129px;
  top: 15px;
}
.footer2 img {
  height: 135px;
  border-radius: 50%;
}
.footer3 {
 position: absolute;
 right: 32px;
 top: 51px;
}
.footer3 img {
  height: 65px;
}
.nav {
  height: 53px;
  width: 100%;
  position: absolute;
  top: 155px;
}
.nav h3 {
  text-align: center;
  font-weight: 400;
}
.nav span {
  left: 131px;
  position: absolute;
}
.below {
  width: 100%;
  height: 65px;
  top: 207px;
  position: absolute;
}
.below1 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 46px;
  top: 15px;
}
.below2 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 170px;
  top: 15px;
}
.below3 {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 42px;
  top: 15px;
}
.below h4 {
  text-align: center;
  font-weight: 400;
}
.box3 {
  width: 100%;
  height: 112px;
  top: -17px;
  position: relative;
  border-bottom: 0.5px solid rgb(232, 225, 225);
}
.box3 h4 {
  font-weight: 400;
  left: 20px;
  position: absolute;
}
.copy {
  width: 100%;
  height: 84px;
  position: absolute;
  top: 26px;
}
.copy1 {
  position: absolute;
  left: 102px;
}
.copy1 .october {
  height: 22px;
  width: 28px;
  font-size: 14px;
  top: 63px;
  left: 17px;
  position: absolute;
}
.copy1 img {
  height: 62px;
  width: 61px;
  border-radius: 50%;
}
.copy2 {
  position: absolute;
  left: 20px;
}
.copy2 .sixteen {
  height: 20px;
  width: 29px;
  font-size: 14px;
  top: 64px;
  left: 15px;
  position: absolute;
}
.copy2 img {
  height: 62px;
  border-radius: 50%;
}
.copy3 {
  position: absolute;
  left: 185px;
}
.copy3 .tree {
  height: 20px;
  width: 56px;
  font-size: 14px;
  top: 63px;
  left: 3px;
  position: absolute;
  color: rgb(97, 139, 216);
}
.copy3 img {
  height: 62px;
  border-radius: 50%;
}
.box4 {
  height: 32px;
  width: 100%;
  top: -3px;
  position: relative;
  border-bottom: 0.5px solid rgb(232, 225, 225);
}
.icon1 .icon2 .icon3 .icon4{
  width: 28px;
  height: 28px;
}
.icon1 {
  left: 57px;
  position: absolute;
}
.icon1 img{
  height: 18px;
}
.icon2 {
  left: 139px;
  position: absolute;
}
.icon2 img{
  height: 18px;
}
.icon3 {
  right: 134px;
  position: absolute;
}
.icon3 img{
  height: 18px;
}
.icon4 {
  right: 63px;
  position: absolute;
}
.icon4 img{
  height: 18px;
}


</style>